<template>
  <el-dialog
    v-model="dialogVisable"
    title="绑定成员"
    :append-to-body="true"
    @close="closeDialog"
    :destroy-on-close="true"
    width="600"
  >
    <el-form :inline="true" :model="searchfilter">
      <el-form-item label="用户名">
        <el-input v-model="searchfilter.filter" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" :icon="Search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      style="width: 100%"
      :data="unbindUser.items"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="50" label="#" align="center"></el-table-column>
      <template v-for="item in columns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          align="center"
        ></el-table-column>
      </template>
    </el-table>
    <div class="paging">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tablePage.totalResult"
        :page-size="tablePage.pageSize"
        @change="handlePageChange"
        v-model:current-page="tablePage.currentPage"
      />
    </div>
    <div class="modal-footer">
      <el-button @click="saveUsertoOrg" :icon="Plus" type="primary">保存</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { Search, Plus } from "@element-plus/icons-vue";
import { getOrgUnbindUser, adddUserToOrg } from "@/api/identity/user/index";

const props = defineProps({
  currentOrg: { type: Object, default: null },
});
const dialogVisable = ref<boolean>(true);
const emit = defineEmits(["closedialogevent", "refresh"]);
const columns = ref([
  {
    label: "用户名",
    prop: "userName",
    width: 130,
  },

  {
    label: "邮箱",
    prop: "email",
    width: 90,
  },
]);

const searchfilter = ref<any>({});
const unbindUser = ref<any>([]);
const tablePage = ref<any>({
  currentPage: 1,
  pageSize: 10,
  totalResult: 0,
});

const selectUserIds = ref<any[]>([]);

const saveUsertoOrg = () => {
  console.log("handleSelectionChange", selectUserIds.value);
  if (selectUserIds.value && selectUserIds.value.length > 0) {
    let param = {
      userId: selectUserIds.value,
      orgId: props.currentOrg.id,
    };
    adddUserToOrg(param).then((res) => {
      if (res) {
        ElNotification({
          title: "提示",
          message: "添加用户成功",
          type: "success",
          duration: 2000,
        });
        closeDialog();
        emit("refresh");
      }
    });
  }
};
const closeDialog = () => {
  dialogVisable.value = false;
  emit("closedialogevent", dialogVisable.value);
};

const pg_init = async () => {
  let param: any = {
    organizationUnitId: props.currentOrg.id,
    filter: searchfilter.value.filter,
    skipCount: (tablePage.value.currentPage - 1) * tablePage.value.pageSize,
    maxResultCount: tablePage.value.pageSize,
  };
  unbindUser.value = await getOrgUnbindUser(param);
  tablePage.value.totalResult = unbindUser.value.totalCount;
};

const search = () => {
  pg_init();
};

const handlePageChange = (currentPage: number, pageSize: number) => {
  tablePage.value.currentPage = currentPage;
  pg_init();
};
const handleSelectionChange = (val: any[]) => {
  selectUserIds.value = [];

  if (val && val.length > 0) {
    val.map((item) => {
      selectUserIds.value.push(item.id);
    });
  }
  //console.log('SelectUserId',selectUserIds.value);
};
onMounted(() => {
  console.log("bind", props.currentOrg);
  pg_init();
});
</script>
<style scoped type="sass">
.header-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
